﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="loginHtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<title text="博客文章专栏'"></title>
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<!--Layui-->
		<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
		<!--font-awesome-->
		<link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />
		<!--全局样式表-->
		<link th:href="@{/css/global.css}" rel="stylesheet" />
		<link th:href="@{/css/animate.min.css}" rel="stylesheet" />
		<!-- 本页样式表 -->
		<link th:href="@{/css/detail.css}" rel="stylesheet"/>
		<link th:href="@{/css/blog.css}" rel="stylesheet" />
		<link th:href="@{/css/me.css}" rel="stylesheet" />
		<link rel="stylesheet" th:href="@{/css/master.css}" />
		<link rel="stylesheet" th:href="@{/css/gloable.css}" />
		<link rel="stylesheet" th:href="@{/css/nprogress.css}" />
		<link rel="stylesheet" th:href="@{/css/message.css}" />
		<!-- jquery -->
		<script th:src="@{/js/jquery.min.js}"></script>
	</head>

	<body>
<!--文章详情页-->
	<div th:insert="~{front/commons/commons.html :: top}"></div>

		<div class="blog-body">

			<div class="blog-container">
				<div class="blog-main">
					<blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow" style="visibility: visible;">
						<a href="userIndex.html" title="网站首页">网站首页<span class="layui-box">&gt;</span></a>
						<a href="article.html" title="文章专栏">文章专栏<span class="layui-box">&gt;</span></a>
						<a><cite class="title" th:text="${article.title}"></cite></a>
					</blockquote>
					<div class="blog-main" style="width: 1775px">

						<div id="parentArticleList" class="blog-main-left animated slideInLeft">

							<div class="article-detail shadow">
								<div class="article-detail-title title" th:text="${article.title}"></div>
								<div class="article-detail-info">
									<span th:text="${'时间:' + article.publicTime}"></span>
									<span th:text="${'作者:' + article.user.username}"></span>
									<span th:text="${'浏览量:' + article.visitorVolume}"></span>
								</div>
								<i class="fa fa-thumbs-o-up" id="support"  style="color: deeppink" th:text=" ${article.supportCount}"></i>
								<div id="articleContent" style="overflow: hidden;" class="article-detail-content">
									<pre style="color: black;" th:text="${article.content}"></pre>
								</div>
							</div>

							<div class="blog-module shadow" style="box-shadow: 0 1px 8px #a6a6a6;">
								<fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
									<legend>来说两句吧</legend>
									<div class="layui-field-box">
										<div class="layui-form blog-editor">
											<input type="hidden" id="commentTopicId" th:value="${article.id}">
											<div class="layui-form-item">
												<textarea required="required" id="content" name="content" class="layui-textarea" placeholder="请输入内容"></textarea>
											</div>
												<div class="layui-form-item ">
													<button class="layui-btn" th:onclick="submitComment()">提交评论</button>
												</div>
										</div>
									</div>
								</fieldset>
								<div class="blog-module-title ">最新评论</div>
                                <div class="mt20">
                                    <ul class="message-list" id="message-list">
                                        <li class="zoomIn article" th:each="comment:${article.commentDtos}">
                                            <!--主回复-->
                                            <div class="comment-parent">
                                                <a name="remark-1"></a>
                                                <img th:src="@{/common/download/avatar/}+${comment.user.avatar}" alt="头像" th:if="${comment.user.avatar}!=null" width="75" height="75">
                                                <img th:src="@{/images/avatar/defaultAvatar.jpg}" alt="头像" th:if="${comment.user.avatar}==null" width="45" height="45">
                                                <div class="info">
                                                    <a th:href="@{/user/detailToOther/article/} +${comment.user.id}" ><span class="username" th:text="${comment.user.username}"></span><a/>
                                                </div>
                                                <div class="comment-content" th:text="${comment.content}"></div>
                                                <p class="info info-footer">
                                                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                                                    <span class="comment-time" th:text="${comment.publicTime}"></span>
                                                    <input type="hidden" id="parentId" th:value="${comment.user.id}">
                                                    <a th:href="@{/comment/reply/} + ${article.id} + '/' +${comment.id}   + '/' + ${comment.user.username}" class="btn-reply" data-targetid="1" th:data-targetname="${comment.user.username}">回复</a>
                                                </p>
                                            </div>
                                            <hr/>
<!--                                            子评论-->
                                            <div class="comment-child" th:each="child:${comment.childComments}" th:if="${comment.childComments != null}">
                                                <a name="reply-1"></a>
                                                <img th:src="@{/common/download/avatar/}+${comment.user.avatar}" alt="头像" th:if="${comment.user.avatar}!=null" width="75" height="75">
                                                <img th:src="@{/images/avatar/defaultAvatar.jpg}" alt="头像" th:if="${comment.user.avatar}==null" width="45" height="45">
                                                <div class="info">
<!--                                                    谁回复了这条评论-->
                                                        <a th:href="@{/user/detailToOther/article/} + ${child.user.id}"><span class="username" th:text="${child.user.username}"></span><a/>
                                                        <span style="padding-right:0;margin-left:-5px;">回复</span>
<!--                                                            回复了谁的评论-->
                                                        <a th:href="@{/user/detailToOther/article/} + ${child.user.id}"><span class="username" th:text="${comment.user.username}"></span><a/>
                                                        <span th:text="${child.content}"></span>
                                                </div>
                                                <p class="info ">
                                                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                                                    <span class="comment-time" th:text="${comment.publicTime}"></span>
                                                    <input type="hidden" id="parentId" th:value="${comment.user.id}">
                                                    <a th:href="@{/comment/reply/} + ${comment.user.id} + '/' + ${article.id} + '/' + ${comment.user.username}" class="btn-reply" data-targetid="1" th:data-targetname="${comment.user.username}">回复</a>
                                                </p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

							</div>
						</div>
					</div>
					<div class="clear "></div>
				</div>
			</div>
		</div>
	<!--页脚-->
	<div th:insert="~{front/commons/commons.html :: down}"></div>
		<div class="blog-share layui-hide ">
			<div class="blog-share-body ">
			</div>
		</div>
		<div class="blog-mask animated layui-hide "></div>
		<script th:src="@{/layui/layui.js}"></script>
		<script th:src="@{/js/global.js}"></script>
		<script th:src="@{/js/about.js}"></script>
		<script th:src="@{/js/detail.js}"></script>
		<script th:src="@{/js/pagemessage.js}"></script>

		<script th:inline="javascript">
			function submitComment(){
				$.ajax({
					method: "post",
					url: "/comment/add",
					data: {
						"content":$("#content").val(),
						"articleID":$("#commentTopicId").val(),
					},
					success:function (data) {
						layer.msg(data)
					},
					error:function (data){
						layer.msg(data)
					}
				})
			}

			$(function (){
				var x = [[${message}]];
				if(x != null){
					layer.msg(x)
				}
			})

			window.onbeforeunload = function () {
				var scrollPos;
				if (typeof window.pageYOffset != 'undefined') {
					scrollPos = window.pageYOffset;
				}
				else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
					scrollPos = document.documentElement.scrollTop;
				}
				else if (typeof document.body != 'undefined') {
					scrollPos = document.body.scrollTop;
				}
				document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
			}

			window.onload = function () {
				if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
					var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
					document.documentElement.scrollTop = parseInt(arr[1]);
					document.body.scrollTop = parseInt(arr[1]);
				}
			}

		</script>
	</body>
</html>